WebXR Hit Test Manager: Implementacija sustava za praćenje zraka za imerzivna iskustva

Uspon tehnologija proširene (AR) i virtualne stvarnosti (VR) otvorio je uzbudljive nove mogućnosti za stvaranje imerzivnih i interaktivnih digitalnih iskustava. WebXR, JavaScript API za pristup VR i AR mogućnostima u web preglednicima, omogućuje programerima diljem svijeta da grade ta iskustva na mnoštvu uređaja. Ključna komponenta u stvaranju uvjerljivih WebXR iskustava je sposobnost interakcije s virtualnim okruženjem. Tu na scenu stupaju WebXR Hit Test Manager i praćenje zraka (ray casting).

Što je praćenje zraka i zašto je važno?

Praćenje zraka (ray casting), u kontekstu WebXR-a, je tehnika koja se koristi za određivanje siječe li virtualna zraka (ravna linija) stvarnu površinu koju je detektirao AR sustav ili virtualni objekt u VR okruženju. Zamislite to kao da usmjerite laserski pokazivač u svoje okruženje i vidite gdje pogađa. WebXR Hit Test Manager pruža alate za izvođenje tih praćenja zraka i dohvaćanje rezultata. Te su informacije ključne za razne interakcije, uključujući:

• Postavljanje objekata: Omogućuje korisnicima postavljanje virtualnih objekata na stvarne površine, poput postavljanja virtualne stolice u dnevnu sobu (AR). Zamislite korisnika u Tokiju koji virtualno uređuje svoj stan prije nego što se odluči za kupnju namještaja.
• Ciljanje i odabir: Omogućuje korisnicima odabir virtualnih objekata ili interakciju s elementima korisničkog sučelja pomoću virtualnog pokazivača ili ruke (AR/VR). Zamislite kirurga u Londonu koji koristi AR za preklapanje anatomskih informacija preko pacijenta, odabirući specifična područja za pregled.
• Navigacija: Pomicanje korisnikovog avatara kroz virtualni svijet pokazivanjem na lokaciju i davanjem upute za kretanje (VR). Muzej u Parizu mogao bi koristiti VR kako bi posjetiteljima omogućio navigaciju kroz povijesne izložbe.
• Prepoznavanje gesta: Kombiniranje testiranja pogodaka s praćenjem ruku za tumačenje korisničkih gesta, poput štipanja za zumiranje ili povlačenja za pomicanje (AR/VR). To bi se moglo koristiti na suradničkom sastanku dizajna u Sydneyu, gdje sudionici zajedno manipuliraju virtualnim modelima.

Razumijevanje WebXR Hit Test Managera

WebXR Hit Test Manager je ključan dio WebXR API-ja koji olakšava praćenje zraka. Pruža metode za stvaranje i upravljanje izvorima testiranja pogodaka (hit test sources), koji definiraju ishodište i smjer zrake. Manager zatim koristi te izvore za provođenje testova pogodaka protiv stvarnog svijeta (u AR-u) ili virtualnog svijeta (u VR-u) i vraća informacije o bilo kakvim presjecima. Ključni koncepti uključuju:

• XRFrame: XRFrame predstavlja snimku XR scene u određenom trenutku, uključujući pozu gledatelja i sve otkrivene ravnine ili značajke. Testovi pogodaka provode se u odnosu na XRFrame.
• XRHitTestSource: Predstavlja izvor zrake koja se prati. Definira ishodište (gdje zraka počinje) i smjer (kamo zraka pokazuje). Obično ćete stvoriti jedan XRHitTestSource po metodi unosa (npr. kontroler, ruka).
• XRHitTestResult: Sadrži informacije o uspješnom pogotku, uključujući pozu (položaj i orijentaciju) točke presjeka i udaljenost od ishodišta zrake.
• XRHitTestTrackable: Predstavlja praćenu značajku (poput ravnine) u stvarnom svijetu.

Implementacija osnovnog sustava za testiranje pogodaka

Prođimo kroz korake za implementaciju osnovnog WebXR sustava za testiranje pogodaka koristeći JavaScript. Ovaj primjer se fokusira na postavljanje AR objekata, ali principi se mogu prilagoditi i za druge scenarije interakcije.

Korak 1: Zatraživanje WebXR sesije i podrške za testiranje pogodaka

Prvo, trebate zatražiti WebXR sesiju i osigurati da je značajka 'hit-test' omogućena. Ova značajka je neophodna za korištenje Hit Test Managera.

            
async function initXR() {
  try {
    xrSession = await navigator.xr.requestSession('immersive-ar', {
      requiredFeatures: ['hit-test'],
    });

    xrSession.addEventListener('end', () => {
      console.log('XR session ended');
    });

    // Initialize your WebGL renderer and scene here
    initRenderer();

    xrSession.updateRenderState({
      baseLayer: new XRWebGLLayer(xrSession, renderer.getContext())
    });

    xrReferenceSpace = await xrSession.requestReferenceSpace('local');
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrReferenceSpace
    });

    xrSession.requestAnimationFrame(renderLoop);

  } catch (e) {
    console.error('WebXR failed to initialize', e);
  }
}

            

              
                Copy
              
            
          

Objašnjenje:

• `navigator.xr.requestSession('immersive-ar', ...)`: Zahtijeva imerzivnu AR sesiju. Prvi argument specificira vrstu sesije ('immersive-ar' za AR, 'immersive-vr' za VR).
• `requiredFeatures: ['hit-test']`: Ključno, zahtijeva značajku 'hit-test', omogućujući Hit Test Manager.
• `xrSession.requestHitTestSource(...)`: Stvara XRHitTestSource, definirajući ishodište i smjer zrake. U ovom osnovnom primjeru, koristimo 'viewer' referentni prostor, koji odgovara gledištu korisnika.

Korak 2: Stvaranje petlje za iscrtavanje (Render Loop)

Petlja za iscrtavanje (render loop) je srce vaše WebXR aplikacije. To je mjesto gdje ažurirate scenu i iscrtavate svaki kadar. Unutar petlje za iscrtavanje, provodit ćete testiranje pogodaka i ažurirati položaj vašeg virtualnog objekta.

            
function renderLoop(time, frame) {
  xrSession.requestAnimationFrame(renderLoop);

  const xrFrame = frame;
  const xrPose = xrFrame.getViewerPose(xrReferenceSpace);

  if (xrPose) {
    const hitTestResults = xrFrame.getHitTestResults(xrHitTestSource);

    if (hitTestResults.length > 0) {
      const hit = hitTestResults[0];
      const hitPose = hit.getPose(xrReferenceSpace);

      // Update the position and orientation of your virtual object
      object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
      object3D.visible = true; // Make the object visible when a hit is found
    } else {
      object3D.visible = false; // Hide the object if no hit is found
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

Objašnjenje:

• `xrFrame.getHitTestResults(xrHitTestSource)`: Izvodi testiranje pogodaka koristeći prethodno stvoren XRHitTestSource. Vraća niz XRHitTestResult objekata, koji predstavljaju sve pronađene presjeke.
• `hitTestResults[0]`: Uzimamo prvi rezultat pogotka. U složenijim scenarijima, možda ćete htjeti iterirati kroz sve rezultate i odabrati najprikladniji.
• `hit.getPose(xrReferenceSpace)`: Dohvaća pozu (položaj i orijentaciju) pogotka u navedenom referentnom prostoru.
• `object3D.position.set(...)` i `object3D.quaternion.set(...)`: Ažurirajte položaj i orijentaciju vašeg virtualnog objekta (object3D) kako bi odgovarali pozi pogotka. To postavlja objekt na točku presjeka.
• `object3D.visible = true/false`: Kontrolira vidljivost virtualnog objekta, čineći ga vidljivim samo kada je pronađen pogodak.

Korak 3: Postavljanje vaše 3D scene (Primjer s Three.js)

Ovaj primjer koristi Three.js, popularnu JavaScript 3D biblioteku, za stvaranje jednostavne scene s kockom. Možete ovo prilagoditi za korištenje drugih biblioteka poput Babylon.js ili A-Frame.

            
let scene, camera, renderer, object3D;
let xrSession, xrReferenceSpace, xrHitTestSource;

function initRenderer() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.xr.enabled = true; // Enable WebXR
  document.body.appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1); // 10cm cube
  const material = new THREE.MeshNormalMaterial();
  object3D = new THREE.Mesh(geometry, material);
  object3D.visible = false; // Initially hide the object
  scene.add(object3D);

  renderer.setAnimationLoop(() => { /* No animation loop here. WebXR controls it.*/ });
  renderer.xr.setSession(xrSession);

  camera.position.z = 2; // Move the camera back
}

// Call initXR() to start the WebXR experience
initXR();

            

              
                Copy
              
            
          

Važno: Obavezno uključite Three.js biblioteku u svoju HTML datoteku:

            
<script src="https://threejs.org/build/three.js"></script>

            

              
                Copy
              
            
          

Napredne tehnike i optimizacije

Gore navedena osnovna implementacija pruža temelj za WebXR testiranje pogodaka. Evo nekoliko naprednih tehnika i optimizacija koje treba razmotriti dok gradite složenija iskustva:

1. Filtriranje rezultata testiranja pogodaka

U nekim slučajevima, možda ćete htjeti filtrirati rezultate testiranja pogodaka kako biste uzeli u obzir samo određene vrste površina. Na primjer, možda želite dopustiti postavljanje objekata samo na vodoravne površine (podove ili stolove). To možete postići ispitivanjem vektora normale poze pogotka i usporedbom s vektorom prema gore.

            
if (hitTestResults.length > 0) {
  const hit = hitTestResults[0];
  const hitPose = hit.getPose(xrReferenceSpace);

  // Check if the surface is approximately horizontal
  const upVector = new THREE.Vector3(0, 1, 0); // World up vector
  const hitNormal = new THREE.Vector3();
  hitNormal.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z);
  hitNormal.applyQuaternion(camera.quaternion); // Rotate the normal to world space

  const dotProduct = upVector.dot(hitNormal);

  if (dotProduct > 0.9) { // Adjust the threshold (0.9) as needed
    // Surface is approximately horizontal
    object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    object3D.visible = true;
  } else {
    object3D.visible = false;
  }
}

            

              
                Copy
              
            
          

2. Korištenje prolaznih izvora unosa (Transient Input Sources)

Za naprednije metode unosa poput praćenja ruku, obično ćete koristiti prolazne izvore unosa. Prolazni izvori unosa predstavljaju privremene događaje unosa, poput dodira prstom ili geste ruke. WebXR Input API omogućuje vam pristup tim događajima i stvaranje izvora za testiranje pogodaka na temelju položaja ruke korisnika.

            
xrSession.addEventListener('selectstart', (event) => {
  const inputSource = event.inputSource;
  const targetRayPose = event.frame.getPose(inputSource.targetRaySpace, xrReferenceSpace);

  if (targetRayPose) {
    // Create a hit test source from the target ray pose
    xrSession.requestHitTestSourceForTransientInput({ targetRaySpace: inputSource.targetRaySpace, profile: inputSource.profiles }).then((hitTestSource) => {
       const hitTestResults = event.frame.getHitTestResults(hitTestSource);
       if (hitTestResults.length > 0) {
         const hit = hitTestResults[0];
         const hitPose = hit.getPose(xrReferenceSpace);

         // Place an object at the hit location
         const newObject = new THREE.Mesh(new THREE.SphereGeometry(0.05, 32, 32), new THREE.MeshNormalMaterial());
         newObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
         scene.add(newObject);
       }
       hitTestSource.cancel(); // Cleanup the hit test source
    });
  }
});

            

              
                Copy
              
            
          

3. Optimizacija performansi

WebXR iskustva mogu biti računalno zahtjevna, osobito na mobilnim uređajima. Evo nekoliko savjeta za optimizaciju performansi:

• Smanjite učestalost testiranja pogodaka: Provođenje testova pogodaka u svakom kadru može biti skupo. Razmislite o smanjenju učestalosti, osobito ako je kretanje korisnika sporo. Možete koristiti tajmer ili provoditi testove pogodaka samo kada korisnik pokrene akciju.
• Koristite Bounding Volume Hierarchy (BVH): Ako imate složenu scenu s mnogo objekata, korištenje BVH može značajno ubrzati detekciju sudara. Three.js i Babylon.js nude implementacije BVH.
• LOD (Level of Detail): Koristite različite razine detalja za svoje 3D modele ovisno o njihovoj udaljenosti od kamere. To smanjuje broj poligona koje je potrebno iscrtati za udaljene objekte.
• Occlusion Culling: Ne iscrtavajte objekte koji su skriveni iza drugih objekata. To može značajno poboljšati performanse u složenim scenama.

4. Rad s različitim referentnim prostorima

WebXR podržava različite referentne prostore, koji definiraju koordinatni sustav koji se koristi za praćenje položaja i orijentacije korisnika. Najčešći referentni prostori su:

• Lokalni (Local): Ishodište koordinatnog sustava je fiksno u odnosu na početni položaj korisnika. Ovo je prikladno za iskustva gdje korisnik ostaje na malom području.
• Ograničen podom (Bounded-floor): Ishodište je na razini poda, a XZ ravnina predstavlja pod. Ovo je prikladno za iskustva gdje se korisnik može kretati po sobi.
• Neograničen (Unbounded): Ishodište nije fiksno, a korisnik se može slobodno kretati. Ovo je prikladno za AR iskustva velikih razmjera.

Odabir odgovarajućeg referentnog prostora važan je kako bi se osiguralo da vaše WebXR iskustvo ispravno radi u različitim okruženjima. Možete zatražiti određeni referentni prostor prilikom stvaranja XR sesije.

            
xrReferenceSpace = await xrSession.requestReferenceSpace('bounded-floor');

            

              
                Copy
              
            
          

5. Postupanje s kompatibilnošću uređaja

WebXR je relativno nova tehnologija i ne podržavaju je svi preglednici i uređaji jednako. Važno je provjeriti podršku za WebXR prije pokušaja inicijalizacije WebXR sesije.

            
if (navigator.xr) {
  // WebXR is supported
  initXR();
} else {
  // WebXR is not supported
  console.error('WebXR is not supported in this browser.');
}

            

              
                Copy
              
            
          

Također biste trebali testirati svoje WebXR iskustvo na različitim uređajima kako biste osigurali da ispravno radi.

Razmatranja o internacionalizaciji

Prilikom razvoja WebXR aplikacija za globalnu publiku, važno je uzeti u obzir internacionalizaciju (i18n) i lokalizaciju (l10n).

• Tekst i elementi korisničkog sučelja: Koristite biblioteku za lokalizaciju za prevođenje teksta i elemenata korisničkog sučelja na različite jezike. Osigurajte da vaš raspored sučelja može primiti različite duljine teksta. Na primjer, njemačke riječi su obično duže od engleskih.
• Mjerne jedinice: Koristite odgovarajuće mjerne jedinice za različite regije. Na primjer, koristite metre i kilometre u većini zemalja, ali stope i milje u Sjedinjenim Državama i Ujedinjenom Kraljevstvu. Omogućite korisnicima da odaberu željene mjerne jedinice.
• Formati datuma i vremena: Koristite odgovarajuće formate datuma i vremena za različite regije. Na primjer, koristite format GGGG-MM-DD u nekim zemljama, a MM/DD/GGGG u drugima.
• Valute: Prikazujte valute u odgovarajućem formatu za različite regije. Koristite biblioteku za rukovanje pretvorbom valuta.
• Kulturna osjetljivost: Budite svjesni kulturnih razlika i izbjegavajte korištenje slika, simbola ili jezika koji bi mogli biti uvredljivi za neke kulture. Na primjer, određene geste rukama mogu imati različita značenja u različitim kulturama.

Alati i resursi za WebXR razvoj

Nekoliko alata i resursa može vam pomoći u razvoju WebXR-a:

• Three.js: Popularna JavaScript 3D biblioteka za stvaranje iskustava temeljenih na WebGL-u.
• Babylon.js: Još jedan moćan JavaScript 3D engine s naglaskom na podršci za WebXR.
• A-Frame: Web framework za izgradnju VR iskustava pomoću HTML-a.
• WebXR Emulator: Proširenje za preglednik koje vam omogućuje testiranje WebXR iskustava bez potrebe za fizičkim VR ili AR uređajem.
• Specifikacija WebXR Device API-ja: Službena WebXR specifikacija od W3C-a.
• Mozilla Mixed Reality Blog: Sjajan resurs za učenje o WebXR-u i srodnim tehnologijama.

Zaključak

WebXR Hit Test Manager je moćan alat za stvaranje interaktivnih i imerzivnih AR/VR iskustava. Razumijevanjem koncepata praćenja zraka i Hit Test API-ja, možete izgraditi uvjerljive aplikacije koje korisnicima omogućuju interakciju s virtualnim svijetom na prirodan i intuitivan način. Kako se WebXR tehnologija nastavlja razvijati, mogućnosti za stvaranje inovativnih i zanimljivih iskustava su beskrajne. Ne zaboravite optimizirati svoj kod za performanse i uzeti u obzir internacionalizaciju prilikom razvoja za globalnu publiku. Prihvatite izazove i nagrade izgradnje sljedeće generacije imerzivnih web iskustava.